<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>HomePage</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">       
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" media="all">   
        <link type="text/css" rel="stylesheet" href="css/paschino.css" media="all"> 
    </head>
    <body>

        <div class="container" style="background-image: url('img/body_background.jpg'); padding-bottom: 70px">
            <div class="offset4" >
                <div class="nav" style="margin-right: 40px"> 
                    <div class="menu" >
                        <a class="submenu" href="#">
                            <div class="greenmenu greenmenuactive" >
                                <div class="menutitle" >
                                    Trang chủ 
                                </div>
                            </div>

                        </a>
                    </div>
                    <div class="menu">
                        <a class="submenu" href="#">
                            <div class="orangemenu" >
                                <div class="menutitle"  >
                                    Giới thiệu
                                </div>
                            </div>

                        </a> 
                    </div>
                    <div class="menu">
                        <a class="submenu" href="#">
                            <div class="purplemenu" >
                                <div class="menutitle"  >
                                    Menu
                                </div>
                            </div>

                        </a> 
                    </div>
                    <div class="menu">
                        <a class="submenu" href="#">
                            <div class="greenmenu" >
                                <div class="menutitle"  >
                                    Tin tức 
                                </div>
                            </div>

                        </a>
                    </div>
                    <div class="menu">
                        <a class="submenu" href="#">
                            <div class="orangemenu" >
                                <div class="menutitle"  >
                                    Thư viện
                                </div>
                            </div>

                        </a> 
                    </div>
                    <div class="menu">
                        <a class="submenu" href="#">
                            <div class="purplemenu" >
                                <div class="menutitle"  >
                                    Tuyển dụng 
                                </div>
                            </div>

                        </a>
                    </div>
                    <div class="menu">
                        <a class="submenu" href="#">
                            <div class="greenmenu" >
                                <div class="menutitle"  >
                                    Liên hệ
                                </div>
                            </div>

                        </a> 
                    </div>
                </div>
            </div>
            <div id="myCarousel" class="carousel slide" >

                <div class="carousel-inner" style="position: absolute" >
                    <div class="item imageLoad active">
                        <img  src="img/homepage.jpg" alt="homepage" >                          
                    </div>
                    <div class="item imageLoad" >                           
                        <img  src="img/homepage1.jpg" >                          
                    </div>
                    <div class="item imageLoad" >                          
                        <img  src="img/homepage2.jpg" >                           
                    </div>
                    <div class="item imageLoad" >
                        <img  src="img/homepage3.jpg" >                           
                    </div>
                    <div class="item imageLoad" >                           
                        <img  src="img/homepage4.jpg" >                         
                    </div>


                </div>

            </div>

            <div class="item">

                <img class="logopaschino" src="img/logo_paschino.png">

            </div>

            <div class="row-fluid">


                <div class="offset8">
                    <a class="contextformenu">
                        <div class="contextmenugreen">
                            IMPACT
                        </div>
                    </a>
                    <a class="contextformenu1">
                        <div class="contextmenugreen1">
                            IPSAE PREPRESTIA VERIO MAXIMI
                        </div>
                    </a>
                    <a class="contextformenu2">
                        <div class="contextmenugreen2">
                            learn more -->
                        </div>
                    </a>
                </div>
            </div>


            <div class="row-fluid" style="min-height: 650px; max-height: 2000px">

                <div class="span10" style="background-color: white !important; margin-left: 87px; padding-bottom: 20px" >
                    <div class="controls" >
                        <label class="titlehomepage">
                            40 NĂM ĐAM MÊ CÀ PHÊ, CHÚNG TÔI HÂN HẠNH ĐƯỢC PHỤC VỤ BẠN TẠI VIỆT NAM
                        </label>
                        <label class="titlehomepage" style="font-size: 14px; font-weight: none; color: black; padding: 0px 0px 20px 0px">
                            Chúng tôi đã luôn tin rằng doanh nghiệp có thể và nên có tác động tích cực đến cộng đồng phục vụ.
                        </label>
                        <div class="row-fluid">
                            <div class="span4" style="margin-left: 8px">
                                <div class="item">
                                    <div class="viewport">
                                        <a href="#">
                                            <span class="dark-background"> KHAI TRƯƠNG
                                                <em style="margin-top: 10px">Chi nhánh Gò Vấp</em>
                                            </span>
                                            <img src="img/homepage3.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="controls-row">
                                    <div class="controls pull-left" style="width: 70px">
                                        <div class="img-circle" >
                                            <img id='1' src="img/greencircle.png">

                                        </div>

                                    </div>
                                    <div class="controls" style="padding: 20px 0px 0px 0px">
                                        <label style="font-weight: bold; font-size: 16px" >KHAI TRƯƠNG</label>

                                        <label style="color: #5EC4B6;font-size: 16px" >Chi nhánh Gò Vấp</label>
                                    </div>
                                </div>
                                <p style="text-align: justify; min-height: 160px; max-height: 160px; overflow: hidden">
                                    Ur? Vit que es doloribus, temquodita sam iduciet, 
                                    quas doloris eicitatem res exerionsecto videl est, 
                                    conseque vererum consequiatur sum net volupient 
                                    acepudam, serionseque commodiam, volupta tiaectur? Puda voloribusa doloritiunt faccum nesectiam 
                                    estiasp eruptia spicte que volor am, sitatemped quisit 
                                    renis volorios aliquiam utat.
                                    Onsequi dolenda nis vel mos conemquiam aut doluptatios aborumquis moluptis a nonest et, sum voluptat

                                </p>
                                <label class="pull-right" style="color: #5EC4B6">Chi tiết --></label>
                            </div>
                            <div class="span4" style="margin-left: 10px">
                                <div class="item">
                                    <div class="viewport">
                                        <a href="#">
                                            <span class="dark-background"> KHAI TRƯƠNG
                                                <em style="margin-top: 10px">Chi nhánh Gò Vấp</em>
                                            </span>
                                            <img src="img/homepage1.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="controls-row">
                                    <div class="controls pull-left" style="width: 70px">
                                        <div class="img-circle ">
                                            <img id='2' src="img/greycircle.png">

                                        </div>

                                    </div>
                                    <div class="controls" style="padding: 20px 0px 0px 0px">
                                        <label style="font-weight: bold; font-size: 16px" >KHAI TRƯƠNG</label>

                                        <label style="color: #5EC4B6;font-size: 16px" >Chi nhánh Gò Vấp</label>
                                    </div>
                                </div>
                                <p style="text-align: justify; min-height: 160px; max-height: 160px; overflow: hidden">
                                    Ur? Vit que es doloribus, temquodita sam iduciet, 
                                    quas doloris eicitatem res exerionsecto videl est, 
                                    conseque vererum consequiatur sum net volupient 
                                    acepudam, serionseque commodiam, volupta tiaectur? Puda voloribusa doloritiunt faccum nesectiam 
                                    estiasp eruptia spicte que volor am, sitatemped quisit 
                                    renis volorios aliquiam utat.
                                    Onsequi dolenda nis vel mos conemquiam aut doluptatios aborumquis moluptis a nonest et, sum voluptat

                                </p>
                                <label class="pull-right" style="color: #5EC4B6">Chi tiết --></label>
                            </div>
                            <div class="span4" style="margin-left: 10px">
                                <div class="item">
                                    <div class="viewport">
                                        <a href="#">
                                            <span class="dark-background"> KHAI TRƯƠNG
                                                <em style="margin-top: 10px">Chi nhánh Gò Vấp</em>
                                            </span>
                                            <img src="img/homepage2.jpg">
                                        </a>
                                    </div>
                                </div>
                                <div class="controls-row">
                                    <div class="controls pull-left" style="width: 70px">
                                        <div class="img-circle ">
                                            <img id='3' src="img/greycircle.png">

                                        </div>

                                    </div>
                                    <div class="controls" style="padding: 20px 0px 0px 0px">
                                        <label style="font-weight: bold; font-size: 16px" >KHAI TRƯƠNG</label>

                                        <label style="color: #5EC4B6;font-size: 16px" >Chi nhánh Gò Vấp</label>
                                    </div>
                                </div>
                                <p style="text-align: justify; min-height: 160px; max-height: 160px; overflow: hidden">
                                    Ur? Vit que es doloribus, temquodita sam iduciet, 
                                    quas doloris eicitatem res exerionsecto videl est, 
                                    conseque vererum consequiatur sum net volupient 
                                    acepudam, serionseque commodiam, volupta tiaectur? Puda voloribusa doloritiunt faccum nesectiam 
                                    estiasp eruptia spicte que volor am, sitatemped quisit 
                                    renis volorios aliquiam utat.
                                    Onsequi dolenda nis vel mos conemquiam aut doluptatios aborumquis moluptis a nonest et, sum voluptat

                                </p>
                                <label class="pull-right" style="color: #5EC4B6">Chi tiết --></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript">
            $('.carousel').carousel({
                interval: 5000
            })
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.viewport').mouseenter(function(e) {
                    $(this).children('a').children('img').animate({height: '220', left: '0', top: '0', width: '265'}, 100);
                    $(this).children('a').children('span').fadeIn(200);

                }).mouseleave(function(e) {
                    $(this).children('a').children('img').animate({height: '220', left: '0', top: '0', width: '265'}, 100);
                    $(this).children('a').children('span').fadeOut(200);
                });
            });
        </script>
        <footer>
            <div class="container" >
                <div class="pull-left offset1" style="width: 400px; position: absolute; color: white; margin-top: 50px">
                    <label style="font-weight: bold">Địa Chỉ:</label>
                    <label>1A Hồng Hà, P.2, Q.Tân Bình, Tp.Hồ Chí Minh</label>
                    <label>Điện thoại: 0839304040</label>
                    <label>Email: admin@paschinocoffee.com</label>
                </div>
                <div class="imagefooter">
                    <img src="img/DELIVERY.png">
                </div>
                <div class="row-fluid" style="height: 200px">
                    <img style="max-height: 200px; min-height: 200px; width: 1024px" src='img/footer_green.png'>
                </div>
                <div class="row-fluid" style="padding-top: 10px;">
                    <img style="height: 50px; width: 100%" src='img/footer.png'>
                </div>
            </div>  

        </footer>
    </body>


</html>
